<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#" class="hot-title" />
      <span style="margin: 10px; color: var(--primary-color)">热门城市</span>
      <div class="hot-city">
        <template v-for="(item, index) in currentGroup?.hotCities" :key="index">
          <div class="city" @click="cityClick(item)">
            {{ item.cityName }}
          </div>
        </template>
      </div>

      <template v-for="(group, index) in currentGroup?.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <van-cell v-for="(city, index) in group.cities" :title="city.cityName" />
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import useCityStore from '@/stores/modules/city'
import { useRouter } from 'vue-router'

const cityStore = useCityStore()
const router = useRouter()
const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => {
      return {
        group: '',
        cities: [],
      }
    },
  },
})
const indexList = computed(() => {
  const list = props.currentGroup.cities.map((item) => item.group)
  list.unshift('#')
  return list
})
const cityClick = (city = '泉州') => {
  console.log(city)
  cityStore.currentCity = city
  router.back()
}
</script>

<style lang="scss" scoped>
.hot-city {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 10px;

  .city {
    width: 78px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--primary-color);
    margin: 10px;
    line-height: 28px;
  }
}
</style>
